<template>
  <div class="header">
    <div class="logo-area">
      <img src="../assets/小区.png" class="logo-img">
      <span class="logo-text">幸福小区管理系统</span>
    </div>
    
    <el-dropdown trigger="hover" placement="bottom-end">
      <span class="avatar-wrapper">
        <el-avatar :size="36" :src="avatarUrl" class="avatar" />
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item :icon="User">
            <span @click="own">个人主页</span>
          </el-dropdown-item>
          <el-dropdown-item :icon="Setting">
            <span>账户设置</span>
          </el-dropdown-item>
          <el-dropdown-item divided :icon="SwitchButton">
            <span @click="logout">退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import { User, Setting, SwitchButton } from '@element-plus/icons-vue'
import { ref } from 'vue'

const avatarUrl = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')
import { useRouter } from 'vue-router'
const router = useRouter()
const logout = () => {
  router.push({ name: 'login' })
}
const own = () => {
  console.log('own!!!!!!!!!!')
  router.push({ name: 'own' })
}
</script>

<style scoped>
.header {
  height: 60px;
  background-color: #2c3e50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logo-area {
  display: flex;
  align-items: center;
}

.logo-img {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.logo-text {
  color: #f1c40f;
  font-size: 18px;
  font-weight: bold;
}

.avatar-wrapper {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s;
}

.avatar-wrapper:hover {
  opacity: 0.8;
}

.avatar {
  background-color: #f1c40f;
  color: #2c3e50;
  font-weight: bold;
}

.el-dropdown-menu__item {
  padding: 0 20px;
  line-height: 36px;
}

.el-dropdown-menu__item span {
  margin-left: 8px;
}
</style>